<template>
  <el-tooltip
          popper-class="my-tooltip-popper"
    :content="content"
    placement="top"
    effect="dark"
    :disabled="isDisabled"
  >
    <div
      class="wordnowrap text-line-1"
      :class="[isLink?'link-text':'no-link-text']"
      :style="{'color': conColor?conColor: 'normal'}"
      @mouseenter="isShowTooltip"
      @click="linkTo"
    >{{ content }}</div>
  </el-tooltip>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  name: 'MyTooltip',
  props: {
    content: {
      type: String,
      default: () => {},
    },
    isLink: {
      type: Boolean,
      default: true,
      required: false,
    },
    conColor: {
      type: String,
      default: '',
    },
  },
  emits: ['click'],
  setup(props, context) {
    var datas = reactive({
      isDisabled: false,
    })
    const isShowTooltip = (e) => {
      const clientWidth = e.target.clientWidth
      const scrollWidth = e.target.scrollWidth
      const arrList = Array.from(e.target.classList)
      if (scrollWidth > clientWidth) {
        datas.isDisabled = false
        if (!arrList.includes('hover-blue')) {
          e.target.classList.add('hover-blue')
        }
      } else {
        datas.isDisabled = true
        e.target.classList.remove('hover-blue')
      }
    }
    const linkTo = () => {
      if (props.isLink) {
        context.emit('click')
      }
    }
    return {
      ...toRefs(datas),
      isShowTooltip,
      linkTo,
    }
  },
}
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";
.wordnowrap {
  color: $main-color;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hover-blue:hover {
  cursor: pointer;
  color: $main-color;
}
.link-text {
  color: $main-color;
  &:hover {
    cursor: pointer;
  }
}
.no-link-text {
  color: $font-color-main;
  &:hover {
    cursor: auto;
    color: $font-color-main;
  }
}
</style>

<style lang="scss">
  .my-tooltip-popper{
    max-width: 50%;
  }
</style>
